<template>
	<view class="deep">
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view class="" v-else>
			<view class="addPhoto m-2  bg-white py-2 rounded-20">
				<view class="d-flex flex-column a-center pt-2">
					<view class="icon_gray bg-light-secondary d-flex flex-column j-center a-center rounded-20" >
						<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
						<view class="crop rounded-20 position-relative"  @tap="unloadImg">
							<image :src="cropFilePath?cropFilePath:basic_detail.img.url" mode="aspectFit" class="img"></image>
							<view class="font drawing text-center">主图</view>
						</view>
					</view>
					<view class="font py-2">添加需要图片上传</view>
				</view>
				<view class="">
					<view class="ml-3 border-top py-2">
						<textarea v-model="goods_name"  placeholder="请输入商品名称" placeholder-class="font-md"  @input="change" name="" id="" maxlength="61"></textarea>
						<view class="font d-flex j-end mr-2 mt-5">{{num}}/{{count}}</view>
					</view>
				</view>
			</view>
			
			<view class="mx-2 mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class="border-bottom clazz d-flex j-sb a-center" @click="goodsClass">
						<view class="">商品分类</view>
						<view class="d-flex a-center j-center mr-2">
							<text class="mr-2 mr-1 text-light-muted">{{clazzList.cat_name==null?basic_detail.category_name:clazzList.cat_name}}</text>
							<image src="../../static/images/user/icon_right_arrow.png" mode="" class="icon_right_arrow"></image>
						</view>
					</view>
					<view class=" clazz  d-flex j-sb a-center" @click="goodsShop">
						<view class="">店铺商品分类</view>
						<view class="d-flex a-center j-center mr-2 w-50">
							<text class="mr-2  mr-1 text-light-muted ellipsis-1">{{shopList.cat_name==null?basic_detail.merchant_category_name:shopList.cat_name}}</text>
							<image src="../../static/images/user/icon_right_arrow.png" mode="" class="icon_right_arrow"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="mx-2 mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class="border-bottom a-center  py-3 d-flex j-sb clazz">
						<view class="">价格</view>
						<view class="mr-2">
							<input type="digit"  class="text-right" :placeholder="basic_detail.shop_price?basic_detail.shop_price:'输入商品价格'" v-model="prcie"  placeholder-class="font-29 mr-1 d-flex j-end" @input="add_price" />
						</view>
					</view>
					<view class=" py-3 a-center  d-flex j-sb clazz">
						<view class="">库存</view>
						<view class="mr-2">
							<input type="digit" class="text-right" :placeholder="basic_detail.stock?basic_detail.stock:'输入商品库存'" v-model="store" placeholder-class="font-29 mr-1 d-flex j-end" @input="add_store" />
						</view>
					</view>
				</view>
			</view>
			
			<view class="mx-2 mb-2 bg-white rounded-20 clazz d-flex a-center j-sb">
				<view class="ml-3">
					<view class="">是否包邮</view>
				</view>
				<view class="mr-2">
					<u-switch v-model="basic_detail.is_shipping" size="43" @change="postage"></u-switch>
				</view>
			</view>
			<view class="bg-white release py-2 w-100 position-fixed bottom-0">
				<button type="warn" @click="rele">更新宝贝</button>
			</view>
		</view>
		<s-popup custom-class="demo-popup" position="bottom" v-model="pictureShow">
			<!-- 内容 -->
			<view class="m-2 bg-white rounded-20 icon_share">
				<view class="border-bottom d-flex ml-4 py-3 j-center a-center" @click="photos">
					<view class="">拍照</view>
				</view>
				<view class="d-flex ml-4 py-3 j-center a-center" @click="album">
						<view class="">我的相册</view>
				</view>
			</view>
			<view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-1 rounded-25" @click="cancelShare">
				取消
			</view>
		</s-popup>
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '@/common/image-tools/index.js'
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import sPopup from '../../components/s-popup/index.vue';
	export default {
		components: {
			ImageCropper,
			sPopup
		},
		data() {
			return {
				checked:false,
				count:60,
				num:0,
				tempFilePath: '', // 图片地址
				cropFilePath: '', // 剪切地址
				clazzList:null, // 商品分类
				shopList:null, // 商家分类
				goods_name:"",// 名字
				prcie:"", // 价格
				store:"" ,// 库存
				pictureShow:false, // 添加图片模态框
				dictionaries:"", // 上传图片字典
				goods_id:'', // 商品ID
				basic_detail:'', // 商品详情
				u_loadmore:true, // 加载中
			}
		},
		onLoad(e) {
			this.goods_id=e.goods_id
			this.$H.post("admin/merchant/goods/detail",{goods_id:e.goods_id}).then(res=>{
				console.log(res)
				this.u_loadmore=false 
				this.basic_detail=res.data
				this.goods_name=this.basic_detail.goods_name
				this.num=this.basic_detail.goods_name.length
			})
		},
		methods: {
			// 商品分类
			goodsClass(){
				uni.navigateTo({
					url:"/pages/goods-add-class/goods-add-class"
				})
			},
			// 店铺商品分类
			goodsShop(){
				uni.navigateTo({
					url:"/pages/goods-add-shopclass/goods-add-shopclass"
				})
			},
			// 文本框
			change(e){
				if(e.detail.cursor<60){
					this.num=e.detail.cursor
					this.goods_name=e.detail.value
				}else{
					console.log("输入已超出限制")
				}
			},
			// 价格
			add_price(e){
				this.prcie=e.detail.value
			},
			// 库存
			add_store(e){
				this.store=e.detail.value
			},
			// 上传图片
			unloadImg(){
				this.pictureShow = true;
			},
			// 拍照
			photos(){
				let that=this;
				uni.chooseImage({
				    count:1,
				    sizeType:["original","compressed"],
					sourceType: ['camera'], //从相册选择
				    success:(res)=>{
						console.log(res,"拍照")
						this.tempFilePath=res.tempFilePaths
						// res.tempFilePaths.forEach(v=>{
						// 	that.uploadFile(v);
						// })
					}
				});
				that.pictureShow=false;
			},
			// 我的相册
			album(){
				let that=this;
				uni.chooseImage({
				    count:9,
				    sizeType:["original","compressed"],
					sourceType: ['album'], //从相册选择
				    success:(res)=>{
						console.log(res,"我的相册")
						uni.showToast({
							title: "上传中...",
							icon: "loading",
							mask: true,
							duration: 5000,
                        });
						this.tempFilePath=res.tempFilePaths
						// res.tempFilePaths.forEach(v=>{
						// 	that.uploadFile(v);
						// })
					}
				});
				that.pictureShow=false;
			},
			uploadFile(filePath){
				uni.uploadFile({
					url:`${this.websitUrl}v2/store/medialibrary/image/temp/upload`,
					filePath:filePath,
					name:"tempimage",
					formData:{
						'token':uni.getStorageSync("token")
					},
					success: (res) => {
						let fileData=JSON.parse(res.data)
						console.log(fileData.data)
						this.dictionaries=fileData.data
					}
				})
			},
			// 裁剪图片
			confirm(e) {
			    this.tempFilePath = ''
			    this.cropFilePath = e.detail.tempFilePath
				this.uploadFile(this.cropFilePath)
			},
			toJSON(){
				return this
			},
			// 是否包邮
			postage(){
				// this.$H.post("admin/goods/toggle/free_shipping",{session:this.session,id:}).then(res=>{	
				// })
			},
			// 更新宝贝
			rele(){
				this.$H.post("admin/merchant/goods/update",{
					goods_id:this.goods_id, // 商品ID
					goods_name:this.goods_name, // 名字
					goods_price:this.prcie, // 价格
					stock:this.store, // 库存
					goods_image:this.dictionaries, // 图片 字典
					is_shipping: this.checked, // 是否包邮
					category_id:this.clazzList.cat_id, //  平台商品分类
					merchant_category:this.shopList.cat_id // 商品分类
					}).then(res=>{
						uni.navigateBack({
							delta:1
						})
				})		
			}
		},
		
		onShow(){
			var clazz = getApp().globalData.clazz;
			var shopClazz = getApp().globalData.shopClazz;
			var globalDatas = getApp().globalData.release;
			console.log(globalDatas)
			if(globalDatas=="发布成功"){
				this.shopList=null;
				this.clazzList=null;
				this.goods_name='';
				this.prcie=null;
				this.store=null;
				this.checked=false;
				this.cropFilePath=null;	
				
				var globalData = getApp().globalData.release; //获取全局变量
				getApp().globalData.release= null; //修改全局变量
				
				var globalData = getApp().globalData.clazz; //获取全局变量
				getApp().globalData.clazz= null; //修改全局变量
				
				var globalData = getApp().globalData.shopClazz; //获取全局变量
				getApp().globalData.shopClazz= null; //修改全局变量
				
			}else if(clazz||shopClazz){
				this.clazzList=clazz
				this.shopList=shopClazz
				
			}
		}
	}
</script>

<style>
	.icon_gray{
		width: 220upx;
		height: 220upx;
	}
	.release /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.img{
		width: 100%;
		height: 100%;
	}
	.crop{
		overflow: hidden;
		width: 220upx;
		height: 220upx;
	}
	
	.s-popup-mask{
		background: rgba(204,204,204,0.3)!important;
	}
	.content{
		background-color:rgb(237,237,237)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #888;
	}
	.icon_share image{
		width: 120upx;
		height: 120upx;
	}
	
	.drawing{
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 10upx 0;
		color: #FFFFFF;
		border-radius: 0 0 20upx 20upx;
		background-color: rgba(0,0,0,0.5);
		z-index: 111;
	}
</style>
